<!--
 * @Author: lsjweiyi lsjweiyi
 * @Date: 2023-04-09 15:55:11
 * @LastEditors: lsjweiyi 759209794@qq.com
 * @LastEditTime: 2024-05-03 22:53:54
 * @FilePath: \web-ssg\pages\image\IdcardChangeColor.vue
 * @Description: 资源下载
-->
<template>
    <div class="myBody">
        <div style="max-width: 800px" class="insideCard">
            <div>{{ "原图格式：" + regionSuffix }}</div>
            <n-divider vertical />
            <n-spin v-if="showFlag == 2" size="small"> <template #description> 转换中..... </template></n-spin>
            <div v-else>
                <span v-if="showFlag != 3">{{ "等待转换为：" }}<span style="color: red"> {{ selectSufix }}</span>
                </span>
                <span v-else style="color: red">{{ "成功转换为：" + lastSuffix }}</span>
            </div>
        </div>
        <div class="buttonGroup">
            <n-h3>要转换格式：</n-h3>
            <NSelect v-model:value="selectSufix" :options="suffixSelectOption"></NSelect>
            <SingleFileUpload @select-file="fileChange" @upload-file="myUpload" :loading="showFlag == 2"
                :disabled="!isSuffixChange"></SingleFileUpload>
            <pay-and-down v-model:task-id="taskId" :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"></pay-and-down>
            <HistoryDown :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"></HistoryDown>
        </div>
        <div class="insideCard">
            <div style="color: red; margin-bottom: 10px">支持格式：png、jpg/jpeg、bmp、webp、tiff/tif、jp2</div>
            <div style="color: red; margin-bottom: 10px">{{ "限制大小：" + maxSize + "MB" }}</div>
            <div style="color: blueviolet; margin-bottom: 10px">由于页面不支持直接显示格式为tiff/tif、jp2的图片，但是能正常转换</div>
            <div>{{ toolIMsg.description }}</div>
            <div style="font-size: 16px; margin-top: 10px">PS：本站不收集任何个人信息，请放心使用！上传的图片在服务器约保存24小时后自动删除</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import "@/assets/insideBody.scss";
const toolIMsg = getImageMenuItem("imgConvers");
import { createDiscreteApi } from "naive-ui";
const maxSize = 10; // 上传图片限制的大小，单位MB
useHead({
    title: toolIMsg.name,
});
useSeoMeta({
    description: toolIMsg.description,
});
let taskId = ref("");
const regionSuffix = ref<string | undefined>("--"); // 原图片的图片格式
const selectSufix = ref("jpg"); // 默认选择的后缀

const isSuffixChange = ref(false);
const showFlag = ref(0); // 0：初始状态，1：选择了图片，2：上传中，3：上传成功
// 自定义上传图像的方法覆盖默认方法
const myUpload = (file: File) => {
    isSuffixChange.value = false;
    if (regionSuffix.value == selectSufix.value) {
        const { message } = createDiscreteApi(["message"]);
        message.error("原图和要转换的格式相同，无需转换");
        return;
    }
    showFlag.value = 2;
    // 后端接口
    imgConvers(file, selectSufix.value, toolIMsg.toolId as number).then((res) => {
        if (responseDeal(res, "转换格式失败！", taskId, showFlag, undefined)) {
            lastSuffix = selectSufix.value;
        }
    });
};

/**
 * @description: 上传文件按钮回调函数
 * @param {*} file
 * @return {*}
 */
const fileChange = (file: File, fn: (result: boolean) => void) => {
    checkFile(file, maxSize * 1024, undefined, ["image/png", "image/jpeg", "jp2", "image/bmp", "image/webp", "image/tiff"]).then((res) => {
        if (res) {
            showFlag.value = 1;
            regionSuffix.value = file.name.split(".")[1];
            fn(true);
            taskId.value=""
        }else {
            fn(false);
        }
    });
};

let lastSuffix = "jpg"; // 上次压缩率
// 当格式改变了才允许上传
watch(selectSufix, () => {
    // 当前处于不能上传时才需要判断，因为如果已经换了图片，那肯定得允许
    if (lastSuffix != selectSufix.value && selectSufix.value != regionSuffix.value) {
        isSuffixChange.value = true;
    } else {
        isSuffixChange.value = false;
    }
});
const suffixSelectOption = [
    {
        label: "jpg",
        value: "jpg",
    },
    {
        label: "png",
        value: "png",
    },
    {
        label: "bmp",
        value: "bmp",
    },
    {
        label: "webp",
        value: "webp",
    },
    {
        label: "jp2",
        value: "jp2",
    },
    {
        label: "tiff",
        value: "tiff",
    },
];
</script>
